<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>vue v-bind 绑定style和class</title>
</head>
<style>
    .red{
        color : red;
    }
    .blue{
        color: blue;
    }
    .textSize1{
        padding: 5%;
        font-size: 80px;
    }
    .textSize2{
        padding: 10%;
        font-size: 8em;
    }
</style>
<body>
<div id="app">

    <template >
        <div v-bind:class="myClass">{{message}}</div>
        <div v-bind:style="myStyle">{{message}}</div>
    </template>
</div>

<script src="../js/vue.js"></script>
<script>

    const message = {
        message : '这是一段文字',
        myClass : ['red', 'textSize2'],
        myStyle : {
            'color': 'yellow',
            'font-size' : '21px',
            'padding' : '15%',
        },
    };

    //数据冻结, 禁止调试
    //Object.freeze(message)

    const demo = new Vue({
        el: '#app',
        data: message,
        methods: {},
        computed: {}
    });
</script>
</body>
</html>